<template>
    <rx-layout style="padding: 10px;">
        <template #middle>
            <rx-fit>
                <template #head>
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <div class="table-operator">
                            <a-button type="primary" @click="add">
                                <template #icon>
                                    <plus-outlined/>
                                </template>
                                {{ $ti18('rxList.newBtn', '新建') }}
                            </a-button>
                            <a-button v-if="removeEnable && selectedRowKeys.length > 0" type="danger"
                                      @click="delByIds(selectedRowKeys)">
                                <template #icon>
                                    <DeleteOutlined/>
                                </template>
                                {{ $ti18('rxList.delBtn', '删除') }}
                            </a-button>
                        </div>
                    </div>
                </template>
                <template #middle>
                    <rx-grid ref="table"
                             :hasPage="true"
                             :urlConfig="urlConfig"
                             :selectConfig="selectConfig"
                             url="/api-bpm/bpm/core/bpmAgent/getMyAgent"
                             field="id"
                             :columns="columns"
                    >
                        <template #appId="{row}">
                            {{ allApps[row.appId] ? $i18(allApps[row.appId].appName, '应用名称') : $ti18('rxList.noAppName', '无') }}
                        </template>
                        <template #action="{ row }">
                            <RxGridAction :size="2">
                                <div @click.stop="edit(row)">{{ $ti18('rxList.editBtn', '编辑') }}</div>
                                <div @click="delByIds([row.id])">{{ $ti18('rxList.delBtn', '删除') }}</div>
                            </RxGridAction>
                        </template>
                    </rx-grid>
                </template>
            </rx-fit>
        </template>
    </rx-layout>
</template>

<script>
import BpmAgentEdit from "./BpmAgentEdit.vue";
import {RxLayout, RxFit, RxGrid, BaseList} from '@lowcode/jpaas-base-lib'
import BpmAgentApi from '@/common/api/bpm/bpmAgent'
import {mapState} from 'pinia';
import useMain from '@/stores/useMain';

export default {
    name: "BpmAgentList",
    mixins: [BaseList],
    components: {
        RxLayout,
        RxFit,
        RxGrid,
    },
    computed: {
        ...mapState(useMain, ['menus']),
        allApps() {
            let json = {};
            this.menus.forEach(item => {
                json[item.id] = {appName: item.title};
            });
            return json;
        }
    },
    data() {
        return {
            urlConfig: {
                ajaxType: 'post',
                contentType: 'json',
                queryParam: {},
                dataField: 'result.data',
                totalField: 'result.totalCount'
            },
            selectConfig: {
                type: 'checkbox',
            },
            // 表头
            columns: [
                {
                    title: this.i18n('form.name', '代理简称'),
                    field: 'name',
                    minWidth: 120
                },
                {
                    title: this.i18n('form.agent', '代理人'),
                    field: 'toUserName',
                    minWidth: 120
                }, {
                    title: this.i18n('form.startTime', '开始时间'),
                    field: 'startTime',
                    minWidth: 120
                },
                {
                    title: this.i18n('form.endTime', '结束时间'),
                    field: 'endTime',
                    minWidth: 120
                },
                {
                    title: this.$ti18('rxForm.createTime', '创建时间'),
                    field: 'createTime',
                    minWidth: 160,
                },
                {
                    title: this.$ti18('rxList.action', '操作'),
                    field: 'action',
                    slots: {default: 'action'},
                    minWidth: 80
                }
            ],
            component: BpmAgentEdit,
            comment: this.i18n('list.comment', '代理配置'),
            widthHeight: ["800px", "600px"]
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "BpmAgent", key);
        },
        delById(ids) {
            return BpmAgentApi.del({ids: ids.join(',')})
        }
    }
}
</script>

<style scoped>
.rx-gridBox {
    height: calc(100% - 46px);
}
</style>
